<template>
  <view class="container">
    <view class="content">
      <view class="practice">
        <view class="practice-name">
          <view>({{ item['type_value'] }})</view>
          <rich-text :nodes="item['kaostitle']"></rich-text>
        </view>

        <view class="practice-option">
          <view
            v-for="(option, index) in item['option']"
            :key="index"
            class="option-detail"
            @click="this_question['flag'] ? clickOption(option['index']) : ''"
          >
            <view
              class="option avatar"
              :class="[
                getOptionActive(option['index']),
                getQuestionTypeClass(item['type']),
              ]"
            >{{ getOptionStr(option['index']) }}</view>
            <view class="option-content">{{ option['content'] }}</view>
          </view>
        </view>
        <!-- 答案 -->
        <view class="practice-about" v-if="showAbout">
          <view class="l-50">
            <text class="practice-about-text">我的答案：</text>
            <text class="practice-about-text" :class="[isMyRightClass(item['my_right'])]">
              {{
              getOptionStr(item['my_answer'])
              }}
            </text>
          </view>
          <view class="l-50">
            <text class="practice-about-text">参考答案：{{ getRightStr() }}</text>
          </view>
          <view class="l-50" v-if="showExplain">
            <text class="practice-about-text">题目详解：</text>
            <rich-text :nodes="item['analysis']"></rich-text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import uniPopup from '../../components/components/uni-popup/uni-popup.vue'
// import uCollapse from '../../components/vk-uview-ui_1.5.2/components/u-collapse/u-collapse.vue'
// import uCollapseItem from '../../components/vk-uview-ui_1.5.2/components/u-collapse-item/u-collapse-item.vue'

import { getGradeContent } from '../../services/kaosi'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import { guanzhuStore, myStore, ShouyeStore } from '@/stores'
import { reactive, ref, toRefs } from 'vue'
let item = ref<any>({})
const showAbout = ref(true)
const showExplain = ref(false)
onLoad(async (e: any) => {
  // 监听全局关注和顶踩事件
  console.log(e)

  console.log(JSON.parse(decodeURIComponent(e.item1)), '我看看111')
  item.value =JSON.parse(decodeURIComponent(e.item1))
})

// 判断当前选择是否选择
const getOptionActive = (index) => {
  let str = ''
  let option = item.value.option
  for (var o = 0; o < option.length; o++) {
    if (option[o]['class'] && option[o]['index'] == index) {
      str = option[o]['class'] || ''
    }
  }

  return str
}

const getQuestionTypeClass = (e) => {
  var _class = 'radio'
  if (e == 2) {
    _class = 'check'
  }
  console.log(_class, '7777')
  return _class
}

// 选择转化为A、B、C
const getOptionStr = (index) => {
  let arr = ['', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N']

  let str = ''
  if (index.length > 1) {
    if (index != '' && index != undefined) {
      let str_arr = [...index.toString()]

      for (var o = 0; o < str_arr.length; o++) {
        str += arr[str_arr[o]].toString()
      }
    }
  } else {
    str = arr[index] || ''
  }

  return str
}

// 返回自己选择状态对应的class
const isMyRightClass = (my_right) => {
  if (my_right === true) {
    return 'my-right'
  }
  if (my_right === false) {
    return 'my-wrong'
  }
  return ''
}
// 返回正确的选项A、B、C
const getRightStr = () => {
  let str = ''
  let option = item.value.option
  for (var o = 0; o < option.length; o++) {
    if (option[o]['right'] == 1) {
      str += getOptionStr(option[o]['index'])
    }
  }

  return str
}
</script>

<style lang="scss" scoped>
.container {
  height: calc(100vh);

  .header {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;

    box-shadow: 10px 10px 5px #f2f2f2;
    font-size: 26rpx;
  }
  .action-btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
  .content {
    padding: 30rpx;
    background-color: #fff;

    .practice {
      padding: 0 20rpx 200rpx 20rpx;

      .practice-name {
        font-size: 35rpx;
        font-weight: 600;
        line-height: 50rpx;
        padding-bottom: 20rpx;
      }

      .practice-img {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      .option-detail {
        display: flex;
        padding-top: 20rpx;
        padding-bottom: 20rpx;
      }

      .option {
      }
      .option-content {
        flex: 1;
        padding-left: 20rpx;
        line-height: 80rpx;
        font-size: 30rpx;
      }

      .l-50 {
        line-height: 50rpx;
      }
      .practice-about-text {
        font-weight: bold;
        font-size: 28rpx;
      }

      .my-right {
        color: #333;
      }
      .my-wrong {
        color: #e42b00;
      }
    }
  }

  .avatar {
    width: 80rpx;
    height: 80rpx;
    line-height: 72rpx;
    font-size: 1.2em;
    font-weight: 600;
    border-radius: 50%;
    text-align: center;
    color: #989b9f;
    border: 2rpx solid #f2f2f2;
  }
  .active {
    background-color: #1a76ff;
    color: #ffffff;
  }
  .check {
    border-radius: 20rpx;
  }

  /* 底部操作菜单 */
  .page-bottom {
    position: fixed;
    bottom: 30upx;
    z-index: 95;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 80%;
    left: 10%;
    /* bheight: 100upx;
			ackground: rgba(255,255,255,.9);
			box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
			border-radius: 16upx; */
  }

  .popup {
    margin: 10rpx;

    .popup-title {
      text-align: center;
      padding: 10rpx;

      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .f-1 {
      flex: 1;
    }

    .popup-content {
      display: flex;
      flex-wrap: wrap;
    }

    .popup-item {
      width: 20%;
      padding: 20rpx;
    }

    .avatar {
      background-color: #f2f2f2;
      line-height: 80rpx;
      border: initial;
    }

    .pop-right {
      color: #fff;
      background-color: #1a76ff;
      line-height: 80rpx;
      border: initial;
    }
    .pop-wrong {
      color: #fff;
      background-color: #e42b00;
      line-height: 80rpx;
      border: initial;
    }
    .pop-active {
      line-height: 72rpx;
      color: #989b9f;
      border: 2rpx solid #1a76ff;
    }
  }
}
</style>
